<template>
	<div class="share_page layer">
		<van-nav-bar :title="$t('my.inviteFriends')" left-arrow @click-left="$router.go(-1)" :border="false" />
		<div class="cont">
			<img src="@/assets/images/my/shareBg.png" class="shareBg" />
			<div class="share_box">
				<div class="title">
					{{$t('reg.inviteCode')}}
				</div>
				<div class="code">
					<span>{{userInfo.invite_code}}</span>
					<div class="copy" @click="$utils.copy(userInfo.invite_code);$toast.success($t('success'))">{{$t('copy')}}
					</div>
				</div>
			</div>
			<div class="share_code">
				<img :src="qrcodeUrl" id="qrcodeUrl" class="qrcodeUrl" />
				<p>{{$t('my.scanQR')}}</p>
			</div>
		</div>
		<el-button class="submit_but" @click="submit">{{$t('my.share')}}</el-button>
	</div>
</template>

<script>
	import Qrcode from 'qrcode'
	export default {
		components: {},
		data() {
			return {
				qrcodeUrl: '',
				shareUrl: '',
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			}
		},
		watch: {
			userInfo: {
				handler(val) {
					if (val && val.id) {
						this.$nextTick(() => {
							this.getImg()
						})
					}
				},
				immediate: true
			}
		},
		mounted() {},
		methods: {
			getImg() {
				let url = `${window.location.origin}/regPhone?invite_code=${this.userInfo.invite_code}`
				// console.log('res', url);
				this.shareUrl = url
				Qrcode.toDataURL(
					url, {
						width: 220,
						height: 220,
						margin: 2
					},
					(err, url) => {
						if (err) {
							throw err
						}
						this.qrcodeUrl = url
					}
				)
			},
			submit() {
				let url = `${window.location.origin}/regPhone?invite_code=${this.userInfo.invite_code}`
				// this.$utils.saveImg('#qrcodeUrl', this.userInfo.invite_code)
				// console.log('invite_code', url);
				this.$utils.copy(url);
				this.$toast.success(this.$t('success'))
			}
		}
	}
</script>

<style lang="less" scoped>
	.share_page {
		position: relative;
		min-height: 100vh;
		// overflow-y: scroll;
		// -webkit-overflow-scrolling: touch;

		.cont {
			position: relative;
			width: 100%;
			// min-height: calc(100vh - 56px);

			.shareBg {
				position: absolute;
				left: 50%;
				top: -56px;
				transform: translateX(-50%);
				width: 375px;
				height: auto;
			}

			.share_box {
				position: absolute;
				top: 120px;
				left: 50%;
				transform: translateX(-60%);
				width: 200px;
				height: 80px;
				// background-color: rgba(255, 255, 255, .7);
				text-align: left;
				color: #000;

				.title {
					font-size: 24px;
					margin-bottom: 15px;
				}

				.code {
					font-size: 12px;
					font-family: PingFang SC;
					padding-left: 10px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-right: 20px;

					span {
						letter-spacing: 5px;
						background: linear-gradient(0deg, #F1EE75 0%, #52E077 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
					}

					.copy {
						font-size: 12px;
						color: #fff;
					}
				}
			}

			.share_code {
				position: absolute;
				top: 300px;
				left: 50%;
				transform: translateX(-50%);
				width: 250px;
				height: 250px;
				background-color: rgba(255, 255, 255, .7);

				p {
					margin-top: 5px;
					color: #999;
					font-size: 14px;
				}
			}
		}

		.submit_but {
			position: fixed;
			bottom: 20px;
			left: 50%;
			transform: translateX(-50%);
			margin: 0;
		}
	}
</style>